<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>机器猫</title>
</head>
<style>
    canvas {
        border: 1px solid black;
        width: 500px;
        height: 500px;
    }
</style>

<body>
    <h1>机器猫的头</h1>
    <canvas width="1000" height="1000"></canvas>
</body>
<script>
    var canvas = document.getElementsByTagName("canvas")[0];
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000000";
    ctx.fillStyle = "#000000";
    ctx.arc(500, 250, 200, 1, 2 / 3 * (Math.PI), true);
    ctx.moveTo(580, 420);
    ctx.arc(500, 290, 150, 1, 2 / 3 * (Math.PI), true);
    ctx.moveTo(500, 160);
    ctx.arc(450, 160, 50, 0, 2 * (Math.PI), true);
    ctx.moveTo(600, 160);
    ctx.arc(550, 160, 50, 0, 2 * (Math.PI), true);
    ctx.moveTo(485, 150);
    ctx.arc(470, 150, 15, 0, 2 * (Math.PI), true);
    ctx.moveTo(545, 150);
    ctx.arc(530, 150, 15, 0, 2 * (Math.PI), true);
    ctx.moveTo(525, 225);
    ctx.arc(500, 220, 25, 0, 2 * (Math.PI), true);
    ctx.moveTo(500, 250);
    ctx.lineTo(500, 300);
    ctx.moveTo(610, 300);
    ctx.lineTo(390, 300);
    ctx.moveTo(610, 300);
    ctx.arc(500, 250, 120, 7, 6 / 7 * (Math.PI), false);
    ctx.moveTo(610, 420);
    ctx.lineTo(390, 420);
    ctx.fillRect(390, 420, 220, 20);

    ctx.strokeRect(350, 440, 300, 50);


    ctx.stroke();
</script>

</html>